theme: Add focus indication for dnd switch in message list controls

It currently is difficult to see what's being focused in the messages list
currently because of that.

Fixes #2447

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1920>

diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 02d122b912abb6f8058241d21aad214b2f44e37b..bb9239f494bc19bedf673cdf85362a4a890693e8 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -25,6 +25,20 @@
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
   padding: $base_margin;
   spacing: $base_spacing * 2;
+
+  .dnd-button {
+    // We need this because the focus outline isn't inset like for the buttons
+    // so the dnd button would grow when it gets focus if we didn't change only
+    // its color when focusing.
+    border-width: 2px;
+    border-color: transparent;
+    border-radius: 99px;
+    border-style: solid;
+
+    &:focus {
+      border-color: transparentize($selected_bg_color, 0.4);
+    }
+  }
 }
 
 // message bubbles

diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 710efbac450806e014e2359a835f4f4dd622b97e..8ccc73d7099f0b3065a417d50868b81266c80210 100644 (file)
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -954,10 +954,12 @@ class CalendarMessageList extends St.Widget {
 
         this._dndSwitch = new DoNotDisturbSwitch();
         this._dndButton = new St.Button({
+            style_class: 'dnd-button',
             can_focus: true,
             toggle_mode: true,
             child: this._dndSwitch,
             label_actor: dndLabel,
+            y_align: Clutter.ActorAlign.CENTER,
         });
         this._dndSwitch.bind_property('state',
             this._dndButton, 'checked',